<!--
 * @Author: life 2145887855@qq.com
 * @Date: 2025-03-25 19:34:23
 * @LastEditors: life 2145887855@qq.com
 * @LastEditTime: 2025-03-27 12:35:43
 * @FilePath: \artist-platform-admin-master\src\views\td\teacher\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="部门编号" prop="departId">
        <el-input
          v-model="queryParams.departId"
          placeholder="请输入部门编号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="工号" prop="teacherNo">
        <el-input
          v-model="queryParams.teacherNo"
          placeholder="请输入工号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input
          v-model="queryParams.realName"
          placeholder="请输入真实姓名"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select
          v-model="queryParams.gender"
          placeholder="请选择性别"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间" prop="hiredate">
        <el-date-picker
          v-model="queryParams.hiredate"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="职称" prop="title">
        <el-select
          v-model="queryParams.title"
          placeholder="请选择职称"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.PROFESSIONAL_TITLE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="教师状态" prop="teacherState">
        <el-select
          v-model="queryParams.teacherState"
          placeholder="请选择教师状态"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.TEACHER_STATE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"
          ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
        >
        <el-button @click="resetQuery"
          ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
        >
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['td:teacher:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>

        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['td:teacher:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>

        <!-- 
        批量导入教师
         -->
        <el-button
          type="warning"
          plain
          @click="handleImport"
          v-hasPermi="['td:teacher:export']"
        >
          <Icon icon="ep:upload" class="mr-5px" /> 导入
        </el-button>

        <!-- 
        下载教师空白模板
         -->
        <el-button
          type="primary"
          plain
          @click="handleExportTemplate"
          :loading="exportTemplateLoading"
          v-hasPermi="['td:teacher:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 下载模板
        </el-button>

        <!-- 教师导入对话框 -->
        <TeacherImportForm ref="importFormRef" @success="getList" />
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
    >
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="部门编号" align="center" prop="departId" />
      <el-table-column label="工号" align="center" prop="teacherNo" />
      <el-table-column label="密码" align="center" prop="password" />
      <el-table-column label="邮箱" align="center" prop="email" />
      <el-table-column label="真实姓名" align="center" prop="realName" />
      <el-table-column label="艺名" align="center" prop="nickName" />
      <el-table-column label="性别" align="center" prop="gender">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.gender" />
        </template>
      </el-table-column>
      <el-table-column label="生日" align="center" prop="birthday" />
      <el-table-column label="入职时间" align="center" prop="hiredate" />
      <el-table-column label="职称" align="center" prop="title">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PROFESSIONAL_TITLE" :value="scope.row.title" />
        </template>
      </el-table-column>
      <el-table-column label="教师状态" align="center" prop="teacherState">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.TEACHER_STATE" :value="scope.row.teacherState" />
        </template>
      </el-table-column>
      <el-table-column label="个人介绍" align="center" prop="description" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column label="操作" align="center" min-width="120px">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['td:teacher:update']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['td:teacher:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <TeacherForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from "@/utils/dict";
import { dateFormatter } from "@/utils/formatTime";
import download from "@/utils/download";
import TeacherImportForm from "./TeacherImportForm.vue";
import { TeacherApi, TeacherVO } from "@/api/td/teacher";
import TeacherForm from "./TeacherForm.vue";

/** 教师 列表 */
defineOptions({ name: "Teacher" });

const message = useMessage(); // 消息弹窗
const { t } = useI18n(); // 国际化

const loading = ref(true); // 列表的加载中
const list = ref<TeacherVO[]>([]); // 列表的数据
const total = ref(0); // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  departId: undefined,
  teacherNo: undefined,
  realName: undefined,
  gender: undefined,
  hiredate: [],
  title: undefined,
  teacherState: undefined,
});
const queryFormRef = ref(); // 搜索的表单
const exportLoading = ref(false); // 导出的加载中
const batchImportLoading = ref(false); // 批量导入的加载中
const exportTemplateLoading = ref(false); // 下载模板的加载中
/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    const data = await TeacherApi.getTeacherPage(queryParams);
    list.value = data.list;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

/** 添加/修改操作 */
const formRef = ref();
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id);
};

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm();
    // 发起删除
    await TeacherApi.deleteTeacher(id);
    message.success(t("common.delSuccess"));
    // 刷新列表
    await getList();
  } catch {}
};

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm();
    // 发起导出
    exportLoading.value = true;
    const data = await TeacherApi.exportTeacher(queryParams);
    download.excel(data, "教师.xls");
  } catch {
  } finally {
    exportLoading.value = false;
  }
};

/** 教师导入 */
const importFormRef = ref();
const handleImport = () => {
  importFormRef.value.open();
};

/** 下载模板操作 */
const handleExportTemplate = async () => {
  try {
    // 下载模板的二次确认
    await message.exportTemplate();
    // 发起下载模板
    exportTemplateLoading.value = true;
    const data = await TeacherApi.exportTeacherTemplate();
    download.excel(data, "教师模板.xls");
  } catch {
  } finally {
    exportTemplateLoading.value = false;
  }
};

/** 初始化 **/
onMounted(() => {
  getList();
});
</script>
